@import './arg.scss';
html {
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.vn{
  visibility:hidden;
  &.vnShow{
    visibility:visible;
  }
}
.questionMod{
  width:100vw;
  height:100vh;
  overflow:hidden;
  position:absolute;
  left:50%;
  top:50%;
  box-sizing:border-box;
  .qm{
    &-item{
    }
    &-step2{
      transform:translatex(99.9%);
      animation-duration:.5s;
      z-index:-1;
      &.animated{
        z-index:1;
      }
    }
    &-full{
      position:absolute;
      left:0;
      top:0;
      bottom:0;
      right:0;
    }
    &-scroll{
      position:absolute;
      left:0;
      right:0;
      top:0;
      bottom:0;
      z-index:1;
    }
    &-content{
      width:3000px;
    }

    &-person{
      width:351rpx;
      height:326rpx;
      background:url(#{$domain}perons-move.png) 0 0 / 100% 100% no-repeat;
      position:absolute;
      left:13rpx;
      bottom:0;
      z-index:2;
      pointer-events:none;
    }
  }
}
.qmPage1{
  .qp{
    &-bg{
      background:url(#{$domain}page1-bg.png) center center / auto 100% no-repeat;
    }
    &-logo{
      width:224rpx;
      height:71rpx;
      background:url(#{$domain}logo.png) 0 0 / 100% 100% no-repeat;
      position:absolute;
      left:20rpx;
      top:20rpx;
    }
    &-btn{
      width:340rpx;
      height:98rpx;
      background:url(#{$domain}btn.png) 0 0 / 100% 100% no-repeat;
      position:absolute;
      left:50%;
      bottom:60rpx;
      transform:translatex(-50%);
      @include shadow;
    }
  }
}
.qmPage2{
  width:18130rpx;
  height:750rpx;
  background:url(#{$domain}bg.jpg) 0 0 / 100% 100% no-repeat;
  .qp{
    &-item{
      position:absolute;
      left:0;
      top:0;
      bottom:0;
    }
  }
}
.qmQuestion{
  &.show{
    z-index:9;
  }
  .qq{
    &-em2{
      display:inline-block;
      width:2em;
    }
    &-inner{
      width:90%;
      height:670rpx;
      background:url(#{$domain}q-bg.png) 0 0 / 100% 100% no-repeat;
      position:absolute;
      left:50%;
      top:50%;
      transform:translate(-250%,-50%);
      box-sizing:border-box;
      padding:56rpx 70rpx;
      transition:all .5s ease;
      &.show{
        transform:translate(-50%,-50%);
      }
    }
    &-no{
      font-size:48rpx;
      color:#1e4cae;
      height:70rpx;
      line-height:70rpx;
      font-weight:bold;
      margin-bottom:24rpx;
    }
    &-centerBlock{
      text-align:center;
    }
    &-hd{
      margin-bottom:10rpx;
      //有图
      &.type2{
        margin-bottom:20rpx;
      }
    }
    &-content{
      display:inline-block;
      text-align:left;
    }
    &-line{
      position:relative;
      &:after{
        content:'';
        height:1px;
        background:#1e4cae;
        position:absolute;
        left:0;
        right:0;
        bottom:-4rpx;
      }
    }
    &-q{
      font-size:34rpx;
      min-height:106rpx;
      line-height:40rpx;
      font-weight:bold;
      color:#1e4cae;
    }
    &-em{
      color:red;
    }
    &-item{
      min-width:45%;
      border:2px solid #fff;
      background:#fff;
      border-radius:88rpx;
      float:left;
      margin-right:30rpx;
      margin-bottom:30rpx;
      text-align:center;
      box-sizing:border-box;
      &.on{
        border-color:#1e4cae;
      }
      position:relative;
      &.style2{
        max-width:auto;
        float:none;
        margin-right:20rpx;
        display:inline-block;
        padding:0 30rpx 0 90rpx;
        vertical-align:top;
        width:auto;
      }
      &.cls1{
        text-align:left;
        .qq-text{
          padding-left:0;
        }
      }
      &.cls2{
        text-align:center;
        .qq-text{
          padding-left:100rpx;
          padding-right:40rpx;
        }
      }
    }
    &-index{
      width:68rpx;
      height:68rpx;
      border-radius:68rpx;
      text-align:center;
      line-height:68rpx;
      font-size:40rpx;
      color:#fff;
      font-weight:bold;
      background:linear-gradient(to top,#1e4cae,#2d67e1);
      position:absolute;
      left:16rpx;
      top:50%;
      transform:translatey(-50%);
    }
    &-text{
      border-radius:84rpx;
      font-size:34rpx;
      color:#262626;
      font-weight:bold;
      line-height:44rpx;
      padding:20rpx 0;
    }
    &-btn{
      width:340rpx;
      height:98rpx;
      background:url(#{$domain}submit-btn.png) 0 0 / 100% 100% no-repeat;
      position:absolute;
      right:20rpx;
      bottom:0rpx;
      @include shadow;
    }
    &-resultPic{
      width:405rpx;
      height:331rpx;
      background:url(#{$domain}ok.png) 0 0 / 100% 100% no-repeat;
      margin:0 auto;
      margin-bottom:40rpx;
      margin-top:30rpx;
      &.wrong{
        background-image:url(#{$domain}wrong.png);
      }
    }
    &-resultBtn{
      width:340rpx;
      height:98rpx;
      background:url(#{$domain}btn-detail.png) 0 0 / 100% 100% no-repeat;
      margin:0 auto;
      @include shadow;
    }
    &-tip{
      &-1{
      }
      &-content{
        &.style2{
          height:550rpx;
          overflow-y:auto;
          overflow-x:auto;
        }
        &-1{
          font-size:48rpx;
          font-weight:bold;
          color:#1e4cae;
          height:60rpx;
          line-height:60rpx;
          margin-bottom:10rpx;
        }
        &-2{
          font-size:34rpx;
          font-weight:bold;
          color:#1e4cae;
          margin-top:20rpx;
          line-height:1.5;
        }
        &-3{
          margin-top:20rpx;
          overflow-x:auto;
          overflow-y:auto;
          &.hasScroll{
            overflow-x:visible;
            overflow-y:visible;
          }
        }
        &-inner{
          white-space:nowrap;
          padding-bottom:40rpx;
          float:left;
          &:after{
            content:'';
            clear:both;
          }
        }
        &-img{
          display:inline-block;
          margin-right:20rpx;
          vertical-align:top;
          width:496rpx;
          height:280rpx;
          &:last-child{
            margin-right:0;
          }
          &.s2{
            width:580rpx;
            height:327rpx;
          }
        }
      }
      &-2{
        width:340rpx;
        height:98rpx;
        background:url(#{$domain}next-btn.png) 0 0 / 100% 100% no-repeat;
        position:absolute;
        right:10rpx;
        bottom:0;
        @include shadow;
        z-index:99;
        transform:translatez(1px)
      }
    }
  }
}
.qmEnd{
  &.show{
    z-index:9;
  }
  .qe{
    &-inner{
      width:90%;
      height:670rpx;
      background:url(#{$domain}q-bg.png) 0 0 / 100% 100% no-repeat;
      position:absolute;
      left:50%;
      top:50%;
      box-sizing:border-box;
      padding:56rpx 70rpx;
      transform:translate(-50%,-50%);
    }
    &-inner2{
      width:740rpx;
      height:464rpx;
      margin:0 auto;
      background:url(#{$domain}dialog-bg.png) 0 0 / 100% 100% no-repeat;
      box-sizing:border-box;
      padding-top:60rpx;
      margin-top:10rpx;
    }
    &-inner3{
      width:740rpx;
      height:464rpx;
      margin:0 auto;
      background:url(#{$domain}dialog-bg-2.png) 0 0 / 100% 100% no-repeat;
      box-sizing:border-box;
      padding-top:60rpx;
      margin-top:10rpx;
    }
    &-q1{
      height:76rpx;
      line-height:76rpx;
      font-size:60rpx;
      font-weight:bold;
      color:#1e4cae;
      text-align:center;
      margin-bottom:20rpx;
    }
    &-q3{
      width:340rpx;
      height:98rpx;
      background:url(#{$domain}result-btn-2.png) 0 0 / 100% 100% no-repeat;
      margin:0 auto;
      @include shadow;
    }
    &-t1{
      height:76rpx;
      line-height:76rpx;
      font-size:60rpx;
      font-weight:bold;
      color:#ff7704;
      text-align:center;
      margin-bottom:20rpx;
    }
    &-t2{
      font-size:30rpx;
      line-height:48rpx;
      margin-bottom:42rpx;
      text-align:center;
      font-weight:bold;
    }
    &-t3{
      width:340rpx;
      height:98rpx;
      background:url(#{$domain}cj-btn.png) 0 0 / 100% 100% no-repeat;
      margin:0 auto;
      @include shadow;
    }
    &-t4{
      height:116rpx;
      line-height:116rpx;
      text-align:center;
      font-size:30rpx;
      color:#1e4cae;
      text-decoration:underline;
      font-weight:bold;
    }
  }
}
.qmCj{
  &.show{
    z-index:9;
  }
  .qe{
    &-inner{
      width:90%;
      height:670rpx;
      background:url(#{$domain}q-bg.png) 0 0 / 100% 100% no-repeat;
      position:absolute;
      left:50%;
      top:50%;
      box-sizing:border-box;
      padding:56rpx 70rpx;
      transform:translate(-50%,-50%);
    }
    &-inner2{
      width:740rpx;
      height:524rpx;
      margin:0 auto;
      background:url(#{$domain}cj-dialog.png) 0 0 / 100% 100% no-repeat;
      box-sizing:border-box;
      margin-top:10rpx;
      padding-top:356rpx;
      &.s2{
        padding-top:300rpx;
      }
    }
    &-inner3{
      width:740rpx;
      height:524rpx;
      margin:0 auto;
      background:url(#{$domain}dialog-bg-3.png) 0 0 / 100% 100% no-repeat;
      box-sizing:border-box;
      margin-top:10rpx;
      padding-top:83rpx;
    }
    &-out{
      width:189rpx;
      height:211rpx;
      background:url(#{$domain}cj-out.png) 0 0 / 100% 100% no-repeat;
      margin:0 auto;
      &-text{
        font-size:30rpx;
        font-weight:bold;
        text-align:center;
        height:48rpx;
        line-height:48rpx;
        color:#ff7704;
        margin-top:24rpx;
      }
      &-btn{
        width:340rpx;
        height:98rpx;
        background:url(#{$domain}back.png) 0 0 / 100% 100% no-repeat;
        margin:0 auto;
        @include shadow;
        margin-top:94rpx;
      }
    }
    &-btn{
      width:340rpx;
      height:98rpx;
      background:url(#{$domain}cj-btn-2.png) 0 0 / 100% 100% no-repeat;
      margin:0 auto;
      @include shadow;
    }
    &-t1{
      height:48rpx;
      line-height:48rpx;
      font-size:30rpx;
      color:#ff7704;
      font-weight:bold;
      text-align:center;
    }
    &-num{
      font-size:60rpx;
    }
    &-t2{
      text-align:center;
      font-size:30rpx;
      color:#262626;
      font-weight:bold;
      margin-top:20rpx;
      height:32rpx;
      line-height:32rpx;
    }
    &-t3{
      width:430rpx;
      height:98rpx;
      background:url(#{$domain}invite-btn.png) 0 0 / 100% 100% no-repeat;
      margin:0 auto;
      margin-top:48rpx;
      @include shadow;
    }
  }
}

.lock {
  position: fixed;
  z-index: 200;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #00b050;
  background-image: url(#{$domain}lock.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 10vw;
  text-align: center;
  display: none;
}

.lock:before {
  content: '请锁定横竖屏幕切换';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  margin-top: 7vw;
  font-size: 4vw;
  color: #fff;
}


@media only screen and (orientation:landscape)
{
  .lock {
    display: block;
  }
}
.delay2{
  animation-delay:0.5s;
}
// iOS滚动条
::-webkit-scrollbar {
width: 5px;
height: 5px;
border-radius: 4px;
}
::-webkit-scrollbar-track {
background-color: #f5f5f5;
}
::-webkit-scrollbar-thumb {
background-color: #aaa;
border-radius: 4px;
}
.scroll1{
  width:300px;
  height:300px;
  &-content{
    width:1000px;
    height:300px;
    background:red;
  }
}
.br{
  display:block;
}
.blockImg{
  width:100%;
  height:100%;
}
#qmShare{
  position:fixed;
  left:-9999px;
  top:-9999px;
}
.qmShareOut{
  width:750rpx;
  height:1458rpx;
  background:#61b4e7;
  position:relative;
  img{
    width:100%;
    display:block;
  }
  .qs{
    &-text{
      font-size:16px;
      color:#000;
      font-weight:bold;
      text-align:center;
      position:absolute;
      bottom:692rpx;
      pointer-events:none;
      left:0;
      right:0;
    }
  }
}
body{
font-family: Helvetica, Tahoma, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', STXihei, 'Microsoft YaHei', SimHei;
}
.cjMp3 {
  position:absolute;
  right:50rpx;
  top:50rpx;
  width:64rpx;
  height:64rpx;
  z-index:10;
  transform:translatez(1px);
  background:url(#{$domain}music-off.png) 0 0 / 100% 100% no-repeat;
  &.on{
    background:url(#{$domain}music.png) 0 0 / 100% 100% no-repeat;
  }
}

.errorMsg{
  position:absolute;
  left:50%;
  top:50%;
  border-radius:10rpx;
  background:rgba(0,0,0,0.8);
  color:#fff;
  line-height:40px;
  font-size:14px;
  padding:0 20rpx;
  min-width:120rpx;
  text-align:center;
  transform:translate3d(-50%,-50%,999px);
  display:none;
  z-index:999;
}

.game-dir {
  color: #fff;
  position: absolute;
  z-index: 4;
  right:20rpx;
  top:40%;
  font-weight: bold;
  font-size:40rpx;
  animation: flash 1s linear infinite;
  display:none;
  pointer-events:none;
  height:60rpx;
  line-height:60rpx;
}

.game-dir:before {
  position: absolute;
  left: -10vw;
  top: 0vw;
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 30rpx;
  border-color: transparent #fff transparent transparent;
}

.game-dir.show {
  display: block;
}

@keyframes flash {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

.loader-panel {
  position: absolute;
  left: 0;
  top: 30%;
  right: 0;
}

.loader-icon {
  width: 5%;
  height: 0;
  padding-top: 5%;
  margin: 0 auto 5%;
  border-radius: 100%;
  border-style: solid;
  border-width: 1vw;
  border-color: transparent #00b050;
  animation: rotate 1s linear infinite;
}

.loader-message {
  text-align: center;
  font-size: 4vw;
}

@keyframes rotate {
  0% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(0deg) scale(.75); }
  100% { transform: rotate(360deg) scale(1); }
}
